<template>
   <div style="margin: 5px;">

    <el-tree class="filter-tree"
    :data="categories" 
    :props="defaultProps" 
    ref="tree"
    node-key="cid"
    v-on:node-click="handlenodeclick"
    v-on:node-drop="handleDrop"
             draggable
    :expand-on-click-node="false"
    default-expand-all>

    <div class="custom-tree-node"  slot-scope="{node,data}"   @contextmenu.prevent="$refs.menu.open($event,{node,data})">

    <span v-if="data.children.length>0" class="el-icon-folder">{{node.label}}</span>
    <span v-if="data.children.length==0" class="el-icon-document">{{node.label}}</span>


    </div></el-tree>

     <vue-context ref="menu" close-on-click="true">
            <template slot-scope="child" v-if="child.data">
                
                 <li>
                <a href="javascript:;" @click="addChild(child.data.node, child.data.data.cid)">
                       新增
                    </a>
                </li>
                <li>
                <a href="javascript:;" @click="Edit(child.data.node, child.data.data)">
                       编辑
                    </a>
                </li>
                <li>
                    <a href="javascript:;" @click="Delete(child.data.node,child.data.data)">
                        删除[{{ child.data.data.categoryName}}]
                    </a>
                </li>
            </template>
        </vue-context>
    <el-dialog title="类别设置" append-to-body=true :visible.sync="canEdit">

        <el-form :model="selObj">
            <el-form-item label="类别" >
                <el-input v-model="selObj.categoryName" clearable autocomplete="off"></el-input>
            </el-form-item>

           <el-form-item label="格式化数据" v-if="typeid==1" >
              
                <VueEditor v-model="formatStr"></VueEditor>
              
              
            </el-form-item>

        </el-form>



        <div slot="footer" class="dialog-footer">
            <el-button v-on:click="canEdit=false">取 消</el-button>
            <el-button v-on:click="Save" type="primary">确 定</el-button>
        </div>
    </el-dialog>
   
    </div>
</template>
<script>
import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
import { VueContext } from 'vue-context';

import { VueEditor, Quill } from 'vue2-editor'

Vue.use(VueAxios, axios)

  var editObj={cid:0,categoryName:"",buziType:0, parentId:0,Memo:"",inUsed:true,createTime:new Date(),formatText:""};
  var treeData={formatStr:"",ctype:0,categories:[],defaultProps:{label:'categoryName',children:'children'},selData:null,menuVisible:false,canEdit:false,selObj:editObj,selNode:null};
export default {
name:"qs-tree",
components:{
   VueContext,VueEditor
},

 data: function () {
        return  treeData;
           

    },
    props: ['typeid'],
    computed:
    {
        MyFormatStr:function()
        {
            return this.formatStr;
        }
    },
    watch:
    {
       formatStr:function(val)
       {
           this.formatStr=val;
       }
    },
    methods:
    {
       
        host:function()
        {
            return "";
        },
        getCData: function () {
            this.axios.get(this.host()+"/api/BzCategory/GetCategories?typeId="+this.typeid).then(response=>{
                this.categories=response.data;
            });

        },

        handlenodeclick: function (cdata) {
            this.$emit('nodeclicked',cdata);
            this.$emit('input',cdata);
           
        },
     

        addChild: function (node,pid) {
            this.clearInput();
            this.selObj.parentId = pid;
            this.canEdit = true;
            this.selNode=node;
   
            console.log("pid:" + pid);
        },

         clearInput: function () {
            this.selObj.parentId = 0;
            this.selObj.cid = 0;
            this.selObj.categoryName = "";
            this.selObj.memo = "";
            this.formatStr="";

        },

        Delete:function(node, data){

       
            this.$confirm('您确定删除吗?删除时下级分类将一并删除!', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                closeOnClickModal:false,
                type: 'warning',
                center: true
        }).then(() => {
            const loading = this.$loading({
                    lock: true,
                    text: '正在删除...',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                  });

            this.axios.post(this.host()+"/api/BzCategory/DelCategory",data).then(response=>
            {
                loading.close();
                if(response.data.code==200)
				{
                    this.canEdit=false;
                    const parent = node.parent;
                    const children = parent.data.children || parent.data;
                    const index = children.findIndex(d => d.id === data.id);
                    children.splice(index, 1);
                    
				}
				else
				{
					this.$notify.error({
					title: '删除失败',
					message: response.data.message
					});
				}
            });

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        })

			
			
        },
        //获取下级节点数据
        GetChildren:function(node)
        {
            var nodeData=node.data;
            console.info("node data:"+nodeData);

             this.axios.get(this.host()+"/api/BzCategory/GetChildren?pid="+nodeData.cid,).then(response=>
            {
              //node.children=response.data;
              response.data.forEach(element => {
                    var index = nodeData.children.findIndex(d => d.cid === element.cid);
                    if(index<=0)
                     nodeData.children.push(element);
              });
             
            });

        },

        Edit: function (node,data) {
            
            
            this.formatStr=data.formatText;
            this.selObj=data;
           // this.$refs.editor.Html=this.formatStr;
           // this.selData
           // this.selObj.cid=data.cid;
            //this.selObj.categoryName=data.categoryName;
           // this.selObj.formatText=data.formatText;
            console.info("edit obj:" + this.selObj.formatText);
            this.canEdit = true;
        },
        
         Save: function () {
            if (this.selObj.categoryName.trim() == "") {
                this.$notify.error({
                    title: '系统提示',
                    message: '类别名称不能为空!'
                });

                return;
            }
			const loading = this.$loading({
							  lock: true,
							  text: '正在保存...',
							  spinner: 'el-icon-loading',
							  background: 'rgba(0, 0, 0, 0.7)'
							});
          this.selObj.buziType=this.typeid;
          this.selObj.formatText=this.formatStr;

          this.axios.post(this.host()+"/api/BzCategory/SaveCategory",this.selObj).then(res=>{
              loading.close();

              if(res.data.code==200)
				{
					this.canEdit=false;
					this.GetChildren(this.selNode);
				}
				else
				{
					this.$notify.error({
					title: '保存失败',
					message: res.data.message
					});
				}
          });
          
         },

          handleDrop(draggingNode, dropNode, dropType, ev) {
        console.log('tree drop: ', dropNode.label, dropType+" dragginnode:"+draggingNode.data.cid);
		this.selObj=draggingNode.data;
		this.selObj.parentId=dropNode.data.cid;
		this.Save();
      },
		 
		
    },

    mounted()
    {
        this.getCData();
    },
    created()
    {
        
    },
}
</script>
<style>

</style>
